<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script src="/javascripts/cubejs-client-core.umd.js"></script>

<div class="container" id="app">
  <div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
              <h5 class="card-title">Total Tweets</h5>
                <div class="card-text">
                    <h3 id="total-tweets"></h3>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Total Retweets</h5>
                <div class="card-text">
                  <h3 id="total-retweets"></h3>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Total Favorites</h5>
                <div class="card-text">
                  <h3 id="total-favorites"></h3>
                </div>
            </div>
        </div>
    </div>
  </div>
  <br />
  <br />
  <div class="row">
      <div class="col-md-6">
          <div class="card">
              <div class="card-body">
                  <h5 class="card-title">Top Tweets Locations</h5>
                  <div class="card-text">
                    <canvas id="pie-chart"></canvas>
                  </div>
              </div>
          </div>
      </div>
      <div class="col-md-6">
          <div class="card">
              <div class="card-body">
                  <h5 class="card-title">Most Popular Languages</h5>
                  <div class="card-text">
                    <canvas id="bar-chart"></canvas>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

<script>
  var cubejsApi = cubejs(
    '{{{ cubejsApiToken }}}',
    { apiUrl: '{{{ cubejsApiUrl }}}/cubejs-api/v1' }
  );

  var kpis = [
    { measure: "Tweets.count", element: "total-tweets" },
    { measure: "Tweets.retweetCount", element: "total-retweets" },
    { measure: "Tweets.favoriteCount", element: "total-favorites" }
  ];

  kpis.forEach(kpi => {
    cubejsApi.load({
      measures: [kpi.measure]
    }).then(resultSet => {
      document.getElementById(kpi.element).textContent =
        numeral(resultSet.totalRow()[kpi.measure]).format('0,0');
    })
  });

  // A helper method to format data for Chart.js
  // and add some nice colors
  var chartJsData = function(resultSet) {
    return {
      datasets: [{
        data: resultSet.series()[0].series.map(function(r) { return r.value }),
        backgroundColor: [
          'rgb(255, 99, 132)',
          'rgb(255, 159, 64)',
          'rgb(255, 205, 86)',
          'rgb(75, 192, 192)',
          'rgb(54, 162, 235)'
        ]
      }],
      labels: resultSet.categories().map(function(c) { return c.category })
    }
  }

  cubejsApi.load({
    measures: ["Tweets.count"],
    dimensions: ["Tweets.location"],
    filters: [
      {
        dimension: "Tweets.location",
        operator: "notEquals",
        values: [""]
      }
    ],
    limit: 5
  }).then(resultSet => {
    new Chart(document.getElementById("pie-chart"), {
      type: 'pie',
      data: chartJsData(resultSet)
    })
  });

  cubejsApi.load({
    measures: ["Tweets.count"],
    dimensions: ["Tweets.lang"],
    limit: 5
  }).then(resultSet => {
    new Chart(document.getElementById("bar-chart"), {
      type: 'bar',
      data: chartJsData(resultSet),
      options: { legend: { display: false } }
    })
  });
</script>
